<template>
  <div class="search-pag">
    <div class="search">
      <div class="input">
        <el-input type="text" v-model="searchtext"
          ><el-button
            slot="append"
            icon="el-icon-search"
            @click="handle(searchtext)"
          ></el-button
        ></el-input>
      </div>
      <div class="content">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>搜索结果</span>
          </div>
          <div class="search-list">
            <div class="search-item" v-for="(item, i) in goodslist" :key="i">
              <div class="item-img">
                <el-image
                  style="width: 120px; height: 120px"
                  src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" 
                />
              </div>
              <div class="item-detail">
                <div  class="item-title" :id="goodslist[i].shopid" @click="jump($event)">{{ item.shopname }}</div>
                <p class="item-desc">
                  {{ item.desc }}
                </p>
                <div class="item-classify">
                  <span>价格:{{ item.price }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { searchlike } from "../request/api";
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      searchtext: "",
      // 搜索商品返回列表
      goodslist: []
    };
  },
  // mounted() {
  //   this.handle(this.searchtext);
  // },
  //把搜索内容拿过来
  mounted(){
    this.searchtext=this.$store.state.searchshop
    this.handle(this.searchtext)
  },
  methods: {
    handle(value) {
      console.log(this.searchtext);
      console.log(value);
      searchlike(value).then((res) => {
        console.log(res.data);
        this.goodslist = res.data;
        console.log(this.goodslist);
      });
    },
    jump(e){
      console.log(e.path[0].id);
      this.$store.state.shopid=e.path[0].id
      this.$router.push('/details')
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
.search-pag {
  margin: 0 auto;
  width: 40%;
  height: auto;

  .input {
    width: 800px;
    height: 48px;
  }
  .content {
    width: 800px;
    height: auto;
    margin-top: 20px;
    .search-list {
      .search-item {
        display: flex;
        width: 736px;
        margin: 0 auto;
        background: #fff;
        padding-top: 16px;
        padding-bottom: 16px;
        box-sizing: border-box;
        position: relative;
        border-bottom: 1px solid rgba(43, 51, 59, 0.1);
        line-height: 1;
        .item-img {
          width: 121px;
          height: 121px;
          margin-right: 32px;
          border-radius: 4px;
          position: relative;
          overflow: hidden;
        }
        .item-detail {
          width: 584px;
          .item-title {
            width: 584px;
            font-size: 16px;
            line-height: 32px;
            font-weight: 700;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: inline-block;
            text-decoration: none;
            color: #1c1f21;
          }
          .item-title:hover {
            color: #fe5471;
          }
          .item-desc {
            max-height: 48px;
            overflow: hidden;
            color: #4d555d;
            font-size: 12px;
            line-height: 24px;
          }
          .item-classify {
            margin-top: 8px;
            span {
              line-height: 24px;
              color: #444;
              font-size: 14px;
              padding-right: 24px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}
</style>
